<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center ">
        <div class="main-left ykt ">
          <div class="con2">
            <ul class="nav-menu">
              <li  class="cur">
                中华经典云课堂
              </li>
            </ul>

            <div class="clear"></div>
            <div class="filter">
              <dl>
                <dt style="width: auto;">课程：</dt>
                <template v-for="(vo, j) in yunClass">
                  <dd :class="{ cur: categoryId == vo.id }" @click="fillter(j, vo.id)">{{ vo.name }}</dd>
                </template>
              </dl>
            </div>


            <ul class="kc-list" v-if="listData.length > 0">
              <template v-for="(item, i) in listData">
                <li  @click="
                isDetailOpen = true;
                currentCourse = item;
              ">
                  <div class="pic_area"><img :src="item.image" /></div>
                  <p>
                    <span class="tit">{{ item.name }}</span>
                  </p>
                </li>
              </template>
            </ul>
            <el-empty :image-size="200" v-else></el-empty>
            <div class="page-area mr-20" v-if="listData.length > 0">
              <span type="button" class="btn-home fl" style="cursor: pointer;" @click="getCatList(categoryId, current, 1)">首页</span>
              <el-pagination
                      background
                      layout="  prev, pager, next "
                      :current-page="currentPage"
                      :total="total"
                      :page-size="1"
                      @current-change="handleCurrentChange"
              ></el-pagination>
              <span type="button" style="cursor: pointer;" class="btn-last fr" @click="getCatList(categoryId, current, total)">尾页</span>
            </div>
          </div>
        </div>
        <div class="main-right  ">
          <div class="con-menu2" @click="goBack()">
            <div class="menu-img"><img src="static/img/r-back.png" alt="" /></div>
            <div class="menu-item">返回</div>
          </div>
          <div class="con-menu2" @click="goHome()">
            <div class="menu-img"><img src="static/img/r-home.png" alt="" /></div>
            <div class="menu-item">首页</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 云课堂内容弹出层 -->
    <div class="selectDig" v-if="isDetailOpen == true">
      <div class="title">
        <span>{{ currentCourse.name }}</span>
        <span class="closed" @click="isDetailOpen = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont" style="padding: 0;"><iframe style="width: 100%; height: 100%;" :src="currentCourse.file_path"></iframe></div>
    </div>
  </div>
</template>

<script>
  var player;
  import Header from '../../components/header.vue';
  export default {
    data() {
      return {
        isOpen: true,
        isDetailOpen: false,
        value: [],
        input: '',
        list: '',
        all_lesson: '',
        token: '',
        listData: [],
        yunClass:[],
        current: -1,
        categoryId: '8',
        categoryId2: '',
        currentPage: 1,
        currentIndex: 0,
        total: 0,
        page: 1,
        page_size: 12,
        filetype: '',
        currentZiyuan:{},
        resourceData:[],
        typeList: []
      };
    },
    created() {
      this.token = localStorage.getItem('token');
      //this.fillter(0,0);
      this.gettypeList();
    },
    methods: {


      gettypeList() {
        this.$api('cloud.class', {}).then(res => {
          this.yunClass = res.data;
          this.categoryId = this.yunClass[0].id;
          this.fillter(0,this.categoryId);
        });
      },
      fillter(index, categoryId) {
        this.categoryId = categoryId;
        this.getCatList(this.categoryId, this.currentIndex, 1 );
      },
      getCatList(id, index, page = 1 ) {
        if (page == 1) {
          this.currentPage = 1;
        } else if (page == this.total) {
          this.currentPage = this.total;
        }
        this.currentIndex = index;
        this.categoryId = id;
        this.page = page;
        let all_form = {
          page: this.page,
          limit: this.page_size,
          cid: this.categoryId
        };
        this.$api('cloud.room', all_form).then(res => {
          this.listData = res.data.data;
          //console.log('this.listData====>>');
          //console.log(this.listData);
          this.total = res.data.last_page;
        });
      },
      handleCurrentChange(e) {
        //console.log(e);
        this.currentPage = e;
        this.getCatList(this.categoryId, this.currentIndex, e, this.filetype);
      },

      goPlay(i, item) {
        this.index  = i;
        this.currentZiyuan = item;
        //console.log(this.currentZiyuan)
        this.isOpen6 = true;
        if (this.getFileType(this.currentZiyuan.file) == 'video' || this.getFileType(this.currentZiyuan.file) == 'radio') {
          this.aliplay(this.currentZiyuan.file);
        }
      },
      getBeikeList(bid) {
        this.$api('resources.beikelist', { bid: bid }).then(res => {
          this.title = res.data.bclass.title;
          this.resourceData = res.data.resource_list;
        });
      },
      playLi(i, item) {
        this.index  = i;
        this.currentZiyuan = item;
      }, // 阿里云视频播放
      aliplay(file) {
        if (player) {
          player.dispose();
        }

        const saveTime = function(memoryVideo, currentTime) {
          localStorage.setItem(memoryVideo, currentTime);
        };

        const getTime = function(memoryVideo) {
          return localStorage.getItem(memoryVideo);
        };
        this.$nextTick(() => {
          player = new Aliplayer(
                  {
                    id: 'course-player',
                    source: file,
                    width: '100%',
                    height: '680px',
                    autoplay: true,
                    isLive: false,
                    components: [
                      {
                        name: 'MemoryPlayComponent',
                        type: AliPlayerComponent.MemoryPlayComponent,
                        args: [false, getTime, saveTime]
                      }
                    ],
                    skinLayout: [{
                  name: 'controlBar',
                  align: 'blabs',
                  x: 0,
                  y: 0,
                  children: [{
                    name: 'progress',
                    align: 'blabs',
                    x: 0,
                    y: 44
                  },
                  {
                    name: 'playButton',
                    align: 'tl',
                    x: 15,
                    y: 12
                  },
                  {
                    name: 'timeDisplay',
                    align: 'tl',
                    x: 10,
                    y: 7
                  },
                  {
                    name: 'fullScreenButton',
                    align: 'tr',
                    x: 10,
                    y: 12
                  },
                  {
                    name: 'volume',
                    align: 'tr',
                    x: 5,
                    y: 10
                  }
                  ]
                }]
                  },
                  function(player) {
                    //console.log('The player is created');
                  }
          );
        });
      },
      getFileType(fileName) {
        // 后缀获取
        let suffix = '';
        // 获取类型结果
        let result = '';
        try {
          const flieArr = fileName.split('.');
          suffix = flieArr[flieArr.length - 1];
        } catch (err) {
          suffix = '';
        }
        // fileName无后缀返回 false
        if (!suffix) {
          return false;
        }
        suffix = suffix.toLocaleLowerCase();
        // 图片格式
        const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
        // 进行图片匹配
        result = imglist.find(item => item === suffix);
        if (result) {
          return 'image';
        }
        // 匹配txt
        const txtlist = ['txt'];
        result = txtlist.find(item => item === suffix);
        if (result) {
          return 'txt';
        }
        // 匹配 excel
        const excelist = ['xls', 'xlsx'];
        result = excelist.find(item => item === suffix);
        if (result) {
          return 'excel';
        }
        // 匹配 word
        const wordlist = ['doc', 'docx'];
        result = wordlist.find(item => item === suffix);
        if (result) {
          return 'word';
        }
        // 匹配 pdf
        const pdflist = ['pdf'];
        result = pdflist.find(item => item === suffix);
        if (result) {
          return 'pdf';
        }
        // 匹配 ppt
        const pptlist = ['ppt', 'pptx'];
        result = pptlist.find(item => item === suffix);
        if (result) {
          return 'ppt';
        }
        // 匹配 视频
        const videolist = [
          '3gp',
          'asf',
          'avi',
          'dat',
          'dv',
          'flv',
          'f4v',
          'gif',
          'm2t',
          'm3u8',
          'm4v',
          'mj2',
          'mjepg',
          'mkv',
          'mov',
          'mp4',
          'mpe',
          'mpg',
          'mpeg',
          'mts',
          'ogg',
          'qt',
          'rm',
          'rmab',
          'ts',
          'vob',
          'wmv',
          'webm'
        ];
        result = videolist.find(item => item === suffix);
        if (result) {
          return 'video';
        }
        // 匹配 音频
        const radiolist = ['aac', 'ac3', 'acm', 'amr', 'ape', 'caf', 'flac', 'm4a', 'mp3', 'ra', 'wav', 'wma'];
        result = radiolist.find(item => item === suffix);
        if (result) {
          return 'radio';
        }
        // 匹配 swf
        const swflist = ['swf'];
        result = swflist.find(item => item === suffix);
        if (result) {
          return 'swf';
        }
        // 其他 文件类型
        return 'other';
      },
      collectLi(index, id) {
        let collection = this.listData[index].collection;
        this.$api('ziyuan.addCollection', { id: id }).then(res => {
          this.listData.splice(index, 1);
          // this.listData[index].collection = collection == 1 ? 0 : 1;
          // this.listData[index].collectionnum = collection == 1 ? this.listData[index].collectionnum-1 : this.listData[index].collectionnum+1;
          // this.currentZiyuan.collectionnum = this.listData[index].collectionnum;
          this.$message.success(res.msg);
          //  this.getCategory();
          this.handleCurrentChange(1);
        });
      },
      goCourse() {
        this.$router.replace('/courseList');
      },

      goBack() {
        this.$router.go(-1);
      },
      goHome() {
          this.$router.push(localStorage.getItem('jump_path'));
      }
    },
    components: { Header }
  };
</script>

<style lang="scss" scoped>
  /deep/ .el-input__inner {
    height: 36px;
    line-height: 35px;
    outline: 0;
  }
</style>
